<template>
  <div style="width: 700px; margin-top: 60px">
    <!--  @change="change" -->
    <vue-slider
      v-model="value"
      :process="process"
      :clickable="false"
      tooltip="hover"
      direction="rtl"
      @drag-end="handleDragging"
    >
      <template v-slot:process="{ start, end, style, index }">
        <div class="vue-slider-process" :style="style" v-if="start != end">
          <div
            :class="[
              'merge-tooltip',
              'vue-slider-dot-tooltip-inner',
              'vue-slider-dot-tooltip-inner-top',
              { tooltipBottom: comIndex(index) },
            ]"
          >
            <div class="title">{{ style.title }}</div>
            {{ value[index + 1] }} - {{ value[index] }}
          </div>
        </div>
      </template>
    </vue-slider>
    <div id="echart-wrapper"></div>
    <router-link to="/img">img</router-link>
  </div>
</template>

<script>
import VueSlider from "vue-slider-component";
import "vue-slider-component/theme/default.css";
import * as echarts from "echarts";
import map from "../common/map";
export default {
  components: {
    VueSlider,
  },
  data: function () {
    return {
      value: [0, 30, 50, 80, 90, 100],
      process: (val) => [
        [val[0], val[1], { backgroundColor: "#FF2D2C", title: "不合格" }],
        [val[1], val[2], { backgroundColor: "#07C992", title: "合格" }],
        [val[2], val[3], { backgroundColor: "#3DA6FF", title: "优秀" }],
        [val[3], val[4], { backgroundColor: "#3D62FF", title: "非常优秀" }],
        [val[4], val[5], { backgroundColor: "#5A3DFF", title: "特别优秀" }],
      ],
      myChart: null,
      color: [],
      echartData: [],
    };
  },
  computed: {
    comIndex() {
      return (i) => {
        if (i % 2 === 0) {
          return true;
        }
        return false;
      };
    },
  },
  mounted() {
    this.init();
    console.log(map, "map--");
    map.getAdderss();
  },
  methods: {
    init() {
      let chartDom = document.getElementById("echart-wrapper");
      this.myChart = echarts.init(chartDom);
      this.color = ["#FF2D2C", "#07C992", "#5A3DFF"];
      this.echartData = this.value;
      this.setOption();
    },
    setOption() {
      let option = {
        color: this.color,
        series: [
          {
            type: "pie",
            radius: ["45%", "60%"],
            center: ["50%", "50%"],
            data: this.echartData,
            emphasis: {
              scale: false,
            },
            label: {
              show: false,
            },
          },
        ],
      };

      this.myChart.setOption(option);
    },
    handleDragging() {
      const arr = [];
      this.value.forEach((i, index) => {
        if (arr.includes(i)) {
          if (i === 100) {
            arr[index - 1] = i - 1;
            arr.push(100);
          } else {
            arr.push(i + 1);
          }
        } else {
          arr.push(i);
        }
      });
      this.value = arr;
      this.echartData = arr;
      this.setOption();
      console.log(this.value, "v--");
    },
    change(v) {
      console.log(v, "v");
      let arr = [];
      v.forEach((i) => {
        if (!arr.includes(i)) {
          arr.push(i);
        }
      });

      console.log(arr, "ss");
      this.echartData = arr;

      this.setOption();
      if (arr.length === 2) {
        alert("最少两个档位");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#echart-wrapper {
  width: 100px;
  height: 100px;
  margin-top: 50px;
}
.merge-tooltip {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -15px);
  .title {
    font-weight: 400;
    font-size: 13px;
    color: #7f7f7f;
  }
}
.tooltipBottom {
  bottom: 0;
  transform: translate(-50%, 53px);
  &::after {
    bottom: 0;
    transform: translate(-50%, -53px);
  }
}
::v-deep .vue-slider-process .vue-slider-dot-tooltip-inner {
  border: none;
  background: unset;
  color: #333333;
  font-weight: 600;
  font-size: 12px;
}
::v-deep .vue-slider-process .vue-slider-dot-tooltip-inner-top::after {
  border: none;
  content: "|";
  color: #e5e5e5;
}
::v-deep .vue-slider-dot-tooltip .vue-slider-dot-tooltip-inner {
  background: #333333;
  border: none;
}

::v-deep .vue-slider-dot-handle:hover {
  border: 1px solid #ff9900;
  box-shadow: 0 0 4px 0 #ff9900;
}
::v-deep .vue-slider-dot-handle-focus {
  box-shadow: 0.5px 0.5px 2px 1px rgb(0 0 0 / 32%);
}

::v-deep .vue-slider-process + .vue-slider-dot {
  display: none;
}
::v-deep .vue-slider-dot {
  &:nth-last-child(1) {
    display: none;
  }
}
</style>
